<template>
	<view class="container position-relative">
		<view class="" v-if="info">
			<view @click="switchCamera" class="refresh flex justify-center align-center round">
				<view class="cuIcon-refresh lg text-white"></view>
			</view>
			<live-pusher id="livePusher" ref="livePusher" class="livePusher" :aspect="'16:9'" :device-position="'front'"
				:remote-mirror="true" mode="HD" :url="pushUrl" @statechange="statechange" @netstatus="netstatus"
				@error="error"></live-pusher>
			<view class="my_header flex justify-start align-center round">
				<image :src="info.headImg" mode="" class="round"></image>
				<view class="margin-left-xs text-white">
					<view class="text-cut">
						{{info.nickName}}
					</view>
					<view class="text-cut">
						{{num}}人在看
					</view>
				</view>
			</view>
			<view class="l_fooder padding">
				<!-- <lff-barrage ref="lffBarrage" type="leftBottom"></lff-barrage> -->
				<scroll-view scroll-y="true" style="width: 520rpx;height: 270rpx;" scroll-with-animation
					:scroll-into-view="scrollInToView">
					<view :id="'item' + item.id"
						class="flex justify-start align-start text-df round padding-sm margin-bottom-xs"
						v-for="item in messageList" style="background-color: rgba(0,0,0,.2);">
						<text class="color">{{item.nickName}}：</text>
						<text class="text-white">{{item.context}}</text>
					</view>
				</scroll-view>
				<view class="flex justify-between align-center">
					<view class="flex justify-center align-center" style="height: 78rpx;">
						<input type="text" v-model="cont" class="text-15 f-grow1 text-white" value=""
							placeholder="说点什么..." />
						<button
							class="bg-color text-white text-15 padding-left padding-right padding-top-xs padding-bottom-xs margin-left-sm round"
							@click.stop="submitMessage">发送</button>
					</view>
					<view class="flex justify-start align-center">
						<!-- 	<image :src="baseUrl + '/static/share4.png'" mode="" class="round"
							style="width: 78rpx;height: 78rpx;min-width: 78rpx;"></image> -->
						<image @click="toBack" :src="baseUrl + '/static/close.png'" mode="" class="round margin-left-xs"
							style="width: 78rpx;height: 78rpx;min-width: 78rpx;"></image>
					</view>
				</view>

			</view>
		</view>

		<!-- <button class="btn" @click="start">开始推流</button> -->
		<!-- <button class="btn" @click="pause">暂停推流</button>
		<button class="btn" @click="resume">resume</button>
		<button class="btn" @click="stop">停止推流</button>
		<button class="btn" @click="snapshot">快照</button>
		<button class="btn" @click="startPreview">开启摄像头预览</button>
		<button class="btn" @click="stopPreview">关闭摄像头预览</button>
		<button class="btn" @click="switchCamera">切换摄像头</button> -->
		<view v-else class="position-relative" style="height: 100vh;">
			<view @click="toBack" class="goBack flex justify-center align-center round">
				<view class="cuIcon-back lg text-white"></view>
			</view>
			<image :src="baseUrl + '/static/live_bg.png'" mode=""
				style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100vw;height: 100vh;z-index: -1;">
			</image>
			<view class="text-white" style="position: absolute;top: 188rpx;left: 20rpx;right: 20rpx;">
				<view class="radius10 flex justify-center align-center"
					style="height: 120rpx;background-color: rgba(0,0,0,.6);">
					<input type="text" v-model="title" value="" class="text-center f-grow1 text-white text-xl text-bold"
						placeholder="填写您的直播标题" />
				</view>
				<!-- 	<view class="radius10 flex justify-center align-center margin-top"
					style="height: 120rpx;background-color: rgba(0,0,0,.6);">
					<input type="text" v-model="nickName" value=""
						class="text-center f-grow1 text-white text-xl text-bold" placeholder="用户昵称" />
				</view> -->
				<view @click="showModal" class="radius10 flex justify-center align-center margin-top"
					style="height: 120rpx;background-color: rgba(0,0,0,.6);">
					<text>{{classificationName}}</text>
					<text class="cuIcon-right"></text>
				</view>
				<!-- 	<view class="radius10 flex justify-center align-center margin-top"
					style="height: 120rpx;background-color: rgba(0,0,0,.6);">
					<text>是否收费</text>
					<text class="cuIcon-right"></text>
				</view> -->
				<view class="flex justify-between align-center radius10 margin-top"
					style="height: 120rpx;background-color: rgba(0,0,0,.6);" v-if="is_flag">
					<view class="text-bold">
						是否收费
					</view>
					<radio-group class="flex-treble flex justify-around align-center margin-left-xs"
						@change="RadioChange">
						<view class="flex justify-start align-center">
							<radio class="radio yellow" :class="chargeStatus=='1'?'checked':''"
								:checked="chargeStatus=='1'?true:false" value="1"></radio>
							<view class="title text-13 margin-left-xs">是</view>
						</view>
						<view class="flex justify-start align-center">
							<radio class="radio yellow" :class="chargeStatus=='0'?'checked':''"
								:checked="chargeStatus=='0'?true:false" value="0"></radio>
							<view class="title text-13 margin-left-xs">否</view>
						</view>
					</radio-group>
				</view>
				<view v-if="chargeStatus==1" class="radius10 flex justify-between align-center text-15 color margin-top"
					style="height: 120rpx;background-color: rgba(0,0,0,.6);">
					<view class="">

					</view>
					<input type="number" v-model="chargeAmount" value=""
						class="text-center f-grow1 color text-15 text-bold" placeholder="20" />
					<view class="margin-right">
						元
					</view>

				</view>
				
		
		</view>

		<button @click="submit"
			class="bg-color text-15 text-white f-btn radius10 flex align-center justify-center">开始直播</button>
	</view>


	<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @click="hideModal">
		<view class="cu-dialog">
			<view class="cu-bar bg-white">
				<!-- <view class="action text-green">确定</view> -->
				<view class="content">
					{{classificationName}}
				</view>
				<!-- <view class="action text-blue" @tap="hideModal">取消</view> -->
			</view>
			<view class="flex justify-between align-center padding solid-bottom" v-for="item in  classification"
				:class="{'color':classificationId==item.id}" @click="changeclassification(item)">
				<view class="">
					{{item.name}}
				</view>
				<image v-if="classificationId==item.id" :src="baseUrl+'/static/selected.png'" mode=""
					style="width: 36rpx;height: 36rpx;min-width: 36rpx;"></image>
				<image v-else :src="baseUrl+'/static/unselected.png'" mode=""
					style="width: 36rpx;height: 36rpx;min-width: 36rpx;"></image>
			</view>
		</view>
	</view>
	<view @click="onShare" v-if="is_share" class="flex justify-end"
		style="background: rgba(0,0,0,.5);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100000;">
		<image :src="baseUrl + '/static/share3.png'" mode=""
			style="width: 432rpx;height: 280rpx;margin-right: 100rpx;margin-top: 120rpx;"></image>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				modalName: null,
				classification: [],
				classificationId: '',
				classificationName: '选择服务分类',
				chargeStatus: 0,
				title: '',
				chargeAmount: 0,
				context: '',
				fil: true,
				scrollInToView: '',
				info: '',
				num: 0,
				messageList: [],
				cont: '',
				pushUrl: '',
				Inter: '',
				is_share: false,
				is_flag: '',
				coverImage:''
			};
		},
		onLoad() {
			this.is_flag = uni.getStorageSync('is_flag')
			this.context = uni.createLivePusherContext("livePusher", this);
			this.startPreview()
			this.getClassification()
		},
		onHide() {
			this.stop()
			clearInterval(this.Inter)
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: "userId",
				success: function() {
					if (that.info) {
						that.start()
						setTimeout(() => {
							that.Inter = setInterval(() => {
								that.getNum()
								that.getMessage()
							}, 3000)
						}, 1500)
					}

				}
			});
		},
		// onShareAppMessage: function(res) {
		// 	this.onShare()
		// 	// if (res.from === 'button') {
		// 	// 来自页面内转发按钮
		// 	// console.log(res)
		// 	// }
		// 	return {
		// 	      path:'/filePage/pages/live-detail/live-detail?id=' + this.info.id + '&type=1'
		// 	    }
		// },
		// onShareTimeline: function() {
		// 	this.onShare()
		// 	return {
		// 	      query:'/filePage/pages/live-detail/live-detail?id=' + this.info.id  + '&type=1'
		// 	    }
		// },
		onUnload() {
			this.stop()
			clearInterval(this.Inter)
		},
		methods: {
			closeImage() {
				this.coverImage = ''
			},
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://super.zoyob.com/mall-util/upload/onePic',
			
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								userId: uni.getStorageSync('userId'),
								Authorization: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJ0ZXN0Iiwic2NvcGUiOlsiYWxsIl0sImlkIjoxLCJleHAiOjE2MTA2MTA4OTMsImF1dGhvcml0aWVzIjpbIuWJjeWPsOS8muWRmCJdLCJqdGkiOiJjNTAwYTQzMy04ODVkLTRkOTctYTZjYy1iNDVmYjVkMmVmMzgiLCJjbGllbnRfaWQiOiJwb3J0YWwtYXBwIn0.j7U3u7X37obI98qyvDr8OyCRupkk401kK-7zGuJexT7UKFF8gXTAfWmBjafRMjmuuCqSM-MPLQPQL1Cq8Fzj6bgS6D5Vq9TbVQ43CyE2mLU415CVlyfH0JJ35vRCj_zlgDp7SsW_ichocwfqSo0h0QlaQ6kSsXgktxpMLULIEYI'
							},
							success: (res) => {
								uni.showToast({
									title: '上传成功',
									icon: 'none'
								})
								console.log(res.data)
								const data = JSON.parse(res.data)
								this.coverImage = data.data
								console.log(this.coverImage)
							}
						});
					}
				});
			},
			onShare() {
				this.is_share = !this.is_share
			},
			toBack() {
				uni.navigateBack()
			},
			showModal() {
				this.modalName = 'bottomModal'
			},
			hideModal() {
				this.modalName = null
			},
			async getClassification() {
				const [err, res] = await this.$get(this.$api.home_categoryTreeList, {
					type: 4
				})
				if (res) {
					this.classification = res.data
				}
			},
			changeclassification(e) {
				this.classificationId = e.id
				this.classificationName = e.name
				this.hideModal()
			},
			RadioChange(e) {
				this.chargeStatus = e.detail.value
			},
			async submit() {
				let that = this
				if (!this.title) {
					this.$util.msg('标题不能为空')
				}
				if (!this.classificationId) {
					this.$util.msg('请选择服务分类')
				}
				const [err, res] = await this.$post(this.$api.live_add, {
					chargeStatus: this.chargeStatus,
					chargeAmount: Number(this.chargeAmount) * 100,
					title: this.title,
					typeId: this.classificationId,
					typeName: this.classificationName,
					
				})
				if (res) {
					this.pushUrl = res.data.pushUrl
					const [er, re] = await this.$get(this.$api.live_sysDetail, {
						id: res.data.id
					})
					if (re) {
						this.info = re.data
						this.start()
						// this.getNum()
						// this.getMessage()
						setTimeout(() => {
							that.Inter = setInterval(() => {
								that.getNum()
								that.getMessage()
							}, 3000)
						}, 1500)
					}
					console.log(res)
				}
			},
			statechange(e) {
				console.log("statechange:" + JSON.stringify(e));
			},
			netstatus(e) {
				console.log("netstatus:" + JSON.stringify(e));
			},
			error(e) {
				console.log("error:" + JSON.stringify(e));
			},
			start() {
				this.context.start({
					success: (a) => {
						uni.setKeepScreenOn({
							keepScreenOn: true
						});
						console.log("livePusher.start:" + JSON.stringify(a));
					}
				});
			},
			close() {
				this.context.close({
					success: (a) => {
						console.log("livePusher.close:" + JSON.stringify(a));
					}
				});
			},
			snapshot() {
				this.context.snapshot({
					success: (e) => {
						console.log(JSON.stringify(e));
					}
				});
			},
			resume() {
				this.context.resume({
					success: (a) => {
						console.log("livePusher.resume:" + JSON.stringify(a));
					}
				});
			},
			pause() {
				this.context.pause({
					success: (a) => {
						console.log("livePusher.pause:" + JSON.stringify(a));
					}
				});
			},
			stop() {
				this.context.stop({
					success: (a) => {
						console.log(JSON.stringify(a));
					}
				});
			},
			switchCamera() {
				this.context.switchCamera({
					success: (a) => {
						console.log("livePusher.switchCamera:" + JSON.stringify(a));
					}
				});
			},
			startPreview() {
				this.context.startPreview({
					success: (a) => {
						console.log("livePusher.startPreview:" + JSON.stringify(a));
					}
				});
			},
			stopPreview() {
				this.context.stopPreview({
					success: (a) => {
						console.log("livePusher.stopPreview:" + JSON.stringify(a));
					}
				});
			},
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			error(e) {
				console.error('live-player error:', e.detail)
			},
			// async getInfo() {
			// 	const [er, re] = await this.$get(this.$api.live_sysDetail, {
			// 		id: this.id
			// 	})
			// 	if (re) {
			// 		this.info = re.data
			// 		this.num = re.data.onLineNum
			// 	}
			// },
			async getNum() {
				const [err, res] = await this.$get(this.$api.live_queryOnline, {
					roomName: this.info.streamName
				})
				if (res) {
					this.num = res.data
				}
			},
			async getMessage() {
				const [err, res] = await this.$get(this.$api.interaction_list, {
					roomId: this.info.id
				})
				if (res) {
					// console.log(res.data)
					this.messageList = res.data
					if (res.data.length > 0) {
						this.scrollInToView = 'item' + this.messageList[this.messageList.length - 1].id
					}
				}
			},
			async submitMessage() {
				if (!this.cont) return
				const [err, res] = await this.$post(this.$api.interaction_add, {
					roomId: this.info.id,
					context: this.cont,
					nickName: uni.getStorageSync('userInfo').nickname
				})
				if (res) {
					this.cont = ''
					this.getMessage()
					// console.log(res)
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}

	.goBack {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		top: 50rpx;
		left: 20rpx;
		z-index: 99;
		background: rgba(255, 255, 255, .5);
	}

	.f-btn {
		position: absolute;
		bottom: 100rpx;
		left: 20rpx;
		right: 20rpx;
		height: 88rpx;
	}

	.livePusher {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
	}

	.refresh {
		width: 72rpx;
		height: 72rpx;
		position: fixed;
		top: 150rpx;
		right: 20rpx;
		z-index: 99999;
	}

	.my_header {
		position: fixed;
		top: 50rpx;
		left: 30rpx;
		height: 72rpx;
		background: rgba(#000, .2);
		padding: 10rpx;
		z-index: 99999;

		image {
			width: 64rpx;
			height: 64rpx;
			min-width: 64rpx;
		}
	}

	.l_fooder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
	}
	
</style>
